<template>
    <div id="home">
        <van-search placeholder="请输入搜索关键词" class="home-search" v-model="value"/>
        <van-collapse v-model="activeNames" accordion border @change="change">
             <van-collapse-item :title="v.parking_lot_name" :name="v.parking_lot_id" v-for="(v,i) in parking" :key="i">
                 <div>
                     <div>地址：{{v.parking_lot_address}}</div>
                     <div>营业时间:每天
                        {{
                        !!v.business_begin_time
                            ? v.business_begin_time
                            : ""
                        }}-{{
                        !!v.business_end_time
                            ? v.business_end_time
                            : ""
                        }}
                         </div>
                     <div>联系方式：{{v.contact_phone}}</div>
                     <div>出口：{{v.exit}}</div>
                     <div>入口：{{v.entrance}}</div>
                     <div>每小时：{{v.hourMoney}}元</div>
                     <div>超出时间每小时：{{v.moreMoney}}元</div>
                     <div style="margin-top:15px">
                         <span style="color:blue;margin-top:10px">可停车区域：</span>
                         <div v-if="!areaList.length">暂无停车区域</div>
                         <div v-else>
                            <div v-for="(v1,i1) in areaList" :key="i1" style="margin-top:15px">
                                <div style="display:flex;justify-content: space-between;">
                                    <span>{{v1.name}}</span>
                                    <van-button type="primary" size="mini" @click="gotoPark(v1,v)">停车</van-button>
                                </div>
                            </div>
                         </div>
                     </div>
                 </div>
             </van-collapse-item>
        </van-collapse>
    </div>
</template>

<script>
export default {
    data() { 
        return { 
            value: '',
            parking: [],
            activeNames: 0,
            areaList: []
        }
    },
    methods:{ 
        async getPark() { 
            try{ 
                const { data : res } = await this.$api.Parking.getParkingList({})
                if(res.code) return this.$message.error(res.msg)
                this.parking = res.result
                for(let v of this.parking) { 
                    v.len = Math.floor(Math.random() * 1000)
                }
            }catch(e){ 
                console.log(e);
            }
        },
        async change(id){ 
            try{ 
                const { data : res } = await this.$api.Parking.getAreaList({
                    parking_lot_id: id
                })
                if (res.code) return this.$message.error(res.msg);
                this.areaList = res.result
            }catch(e){ 
                console.log(e);
            }
        },
        gotoPark(v,v1) { 
            this.$router.push({ 
                name: 'park2',
                params: { 
                    data: {
                        ...v,
                        ...v1
                    }
                }
            })
        }
    },
    mounted() { 
        this.getPark()
    }
    
}
</script>

<style lang="scss" scoped>
$blue: #2d8cf0;
$fontColor: #323233;
#home {
  height: 100%;
  width: 100%;
  font-size: 0.28rem;
}
.home-search {
  background: $blue !important;
  
}
</style>